<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>check in</title>
		<script src="/javascripts/jquery-1.8.0.js" type="text/javascript"></script>
		<script src="/javascripts/handle.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="/stylesheets/check-in-style.css">
		<link rel="stylesheet" type="text/css" href="/stylesheets/loading.css">
	</link>
	
	<style type="text/css">
	*{
	margin:0;
	padding: 0;
	}
	input{
	background-color: transparent;
	border: medium none;
	color: #1ca3ac;
	font-size: 16px;
	font-weight: 800;
	height: 50px;
	line-height: 20px;
	margin-left: 10px;
	text-align: center;
	width: 250px;
	}
	input.password {
	margin-left: 22px;
	}
	}
	#center_land{
	margin:0 auto;
	}
	#center_land div{
	margin:0px auto;
	}
	#logo{
	/*  padding: 150px 5px 5px 0;*/
	/*    width: 40px;*/
	}
	#logo img{
	display: block;
	margin: 0 auto 10px;
	}
	#line{
	line-height:10px;
	height:10px;
	width:180px;
	}
	#line img{
	width:180px;
	height:1px;
	}
	#name{
	height: 45px;
	line-height: 45px;
	margin-top: 10px;
	width: 100%;
	color:#222;
	font-weight: bold;
	}
	#keyword{
	height: 45px;
	line-height: 45px;
	margin-top: 20px;
	width: 100%;
	color:#222;
	font-weight: bold;
	}
	#check-in{
	text-align:center;
	margin:10px 0 0 0;
	line-height:25px;
	}
	#err{
	color:black;
	font-size:12px;
	margin-top: 0.6em
	}
	/* if width > 1800, add your style here*/
	@media screen and (min-width: 1800px){
	#logo{
	padding:300px 0 5px 0;
	}
	}
	</style><!-- by kosmos  -->
</head>
<body>
	<div class="loading">
		<div class="loading_proportion">
			<div id="load"></div>
		</div>
		
	</div>
	<div class="bg_mask"></div>
	<div id="content">
		<div id="center_land">
			<div id="logo"><img src="/images/logo.png" alt="logo" / ></div>
			<div id="sign-in"><img src="/images/sign-in.png" style="display: block; margin: 0 auto 10px auto;" /></div>
			<div id="input">
				<ul>
					<li id="name">用户名<input type="text" name="number"></li>
					<hr style="margin-top:15px;background-color:#1ca3ac;border:0;height: 1px;box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.6);opacity:0.8" />
					<li id="keyword">密码<input type="password" name="password" class='password'></li>
				</ul>
				
				<div id="err"></div>
			</div>
			<div id="check-in"><button style="" class="signin">登录</button></div>
			<div id="check-in" ><a href="/student/help" target="_blank"><button style="" class="help">使用教程</button></a></div>
			
		</div>
	<!-- 	<div style="" class="help">
	<div class="help_info"><h3 class="help_title"><a href="">使用教程</a></h3>
				
				<ol>
					<li>扫描二维码进行选课或通过<u>http://signup.misasagi.me</u>登陆选课</li>
					<li>用户名密码均为学号</li>
					<li>登陆后点击<u>快速签到</u>并输入发放的激活码</li>
					<li>激活码只可使用一次</li>
					<li>若签到不成功，请将专业，班级，学号，姓名以及激活码发送至<u>servicekid@hotmail.com</u></li>
				</ol>
				
				
				
			</div>
		</div> -->
	</div>
</body>
<script>
$(document).ready(function(){
$("#check-in").bind("click",check_data);
$("div#loading").css("display","none");
});
$(document).keydown(function(event){
if(event.keyCode === 13){
	check_data();
}
});
function check_data(){
var username = $("input[name=number]").val(),
password = $("input[name=password]").val();
if(username != "" && username && password != "" && password){
	if(ist(username)){
		$.post("/teacher/login",{"tid":username,"passwd":password,"handle":true},data_handler,"json");
	} else {
		$.post("/student/login",{"sid":username,"passwd":password,"handle":true},data_handler,'json');
	}
	/*
	$.post("/login",{"id":username,"password":password},function(data){
		if(data.info == "ok"){
			window.location.href = data.href;
		} else if(data.info == "err"){
			$("#err").text("请输入正确的用户名和密码！");
		}
	},json);
	*/
} else {
	$("#err").text("请输入正确的用户名和密码！");
	$("input").css("background","rgba(255,0,0,0.2)");
}
}
</script>
</html>
